iT邦幫忙

0

Gulp 基礎介紹 gulp-load-plugins DAY82

  • 分享至 

  • xImage
  •  

由於我們前面每加入一個 插件(plugin)

就要引入一次

會發現其實超級麻煩

而且會顯得程式碼非常冗長

所以 gulp-load-plugins 可以解決此問題

https://www.npmjs.com/package/gulp-load-plugins

那我們就介紹如何安裝與使用啦~~

npm install gulp-load-plugins

引入 const $ = require('gulp-load-plugins')();

但此套件只對 gulp開頭的 才會有效
autoprefixer 不屬於 gulp套件
屬於 postcss的延伸套件

加入 $

gulp.task('jade', function() {
    gulp.src('./source/**/*.jade')
    .pipe($.plumber())
    .pipe($.jade({
        pretty: true
    }))
    .pipe(gulp.dest('./public/'))
});
gulp.task('sass', function () {
    return gulp.src('./source/scss/**/*.scss')
    .pipe($.plumber())
    .pipe($.sass().on('error', $.sass.logError))
    .pipe($.postcss([autoprefixer()]))
    .pipe(gulp.dest('./public/css'));
});
gulp.task('watch', function () {
    gulp.watch('./source/scss/**/*.scss', ['sass']);
});
gulp.task('default',['jade','sass','watch']);

最後在終端機輸入 gulp
看是否有錯誤
這樣就大功告成啦
若有任何問題 或 內容有誤
都可以跟我說唷/images/emoticon/emoticon41.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言